<template>
  <div class="body">
    <el-table
      :data="collect"
      height="100%"
      border
      stripe
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column prop="gid" sortable label="编号" fit> </el-table-column>
      <el-table-column prop="name" sortable label="商品" fit> </el-table-column>
      <el-table-column prop="price" sortable label="价格" fit>
      </el-table-column>
      <el-table-column prop="collDate" sortable label="收藏时间" fit>
      </el-table-column>
      <el-table-column fit
        ><template slot-scope="scope">
          <el-button @click="watchCollect(scope.row)" type="text" size="medium"
            >查看详情</el-button
          >
          <el-popconfirm
            title="请确认取消收藏"
            @confirm="deleteCollect(scope.row)"
          >
            <el-button slot="reference" type="text" size="medium"
              >取消收藏</el-button
            >
          </el-popconfirm>
        </template></el-table-column
      >
    </el-table>
  </div>
</template>

<script>
export default {
  created() {
    //请求
    this.$http.get("my/collect").then((res) => {
      if (res.data.success === true) {
        for (var i = 0; i < res.data.collectList.length; i++) {
          res.data.collectList[i].collDate = this.convertTime(
            parseInt(res.data.collectList[i].collDate)
          );
        }
        this.collect = res.data.collectList;
      } else {
        this.$message.error("加载失败,请重新加载!");
      }
    });
  },
  data() {
    return {
      collect: [],
    };
  },
  methods: {
    watchCollect(row) {
      //跳转到详情页
      var good = {};
      this.$http
        .get("viewGoodDetails?gid=" + row.gid)
        .then((res) => {
          if (res.data.success === true) {
            good = {
              goodid: res.data.gid,
              userid: res.data.uid,
              username: res.data.username,
              name: res.data.name,
              price: res.data.price,
              num: res.data.inventory,
              catalog: res.data.catalog,
              img: res.data.imgDir,
              introduction: res.data.goodsDesc,
            };
            this.$store.commit("setGood", good);
            this.$router.push("Goodinfo");
          } else {
            this.$message.error("加载失败,请稍后再试!");
            console.log(res);
          }
        })
        .catch((e) => {});
    },
    deleteCollect(index) {
      this.$http.post("deletecollect", { gid: index.gid }).then((res) => {
        if (res.data.success === true) {
          this.collect.splice(
            this.collect.findIndex((item) => item.goodid == index.goodid),
            1
          );
          this.$message.success(res.data.message);
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
  },
};
</script>


<style lang="less" scoped>
.body {
  height: 100%;
  width: 100%;
}
/deep/.el-table {
  font-size: 19px;
}
/deep/.el-button {
  font-size: 19px;
  padding-right: 20px;
}
</style>